<template>
	<view class="about-container">
		<!-- 店铺头部信息 -->
		<view class="shop-header">
			<image class="shop-banner" :src="aboutInfo.aboutusBackground || '/static/images/aboutus.png'" mode="aspectFill"></image>
			<view class="shop-info">
				<text class="shop-name">{{aboutInfo.storeName || '森理男士脱毛店'}}</text>
				<text class="shop-slogan">{{aboutInfo.storeTitle || '襄阳首家专业男士脱毛店'}}</text>
			</view>
		</view>
		
		<!-- 核心优势 -->
		<view class="advantage-section">
			<view class="section-title">店铺优势</view>
			<view class="advantage-list">
				<view class="advantage-item">
					<text class="advantage-title">专业技术</text>
					<text class="advantage-desc">{{aboutInfo.specificPurposes || '采用先进冰点激光脱毛技术，安全舒适，效果显著'}}</text>
				</view>
				<view class="advantage-item">
					<text class="advantage-title">服务品质</text>
					<text class="advantage-desc">{{aboutInfo.serviceQuality || '环境整洁卫生，一人一室，服务贴心周到'}}</text>
				</view>
			</view>
		</view>
		
		<!-- 联系方式 -->
		<view class="contact-section">
			<view class="section-title">联系我们</view>
			<view class="contact-list">
				<view class="contact-item" @tap="makePhoneCall">
					<text class="contact-icon">📞</text>
					<text class="contact-label">电话咨询</text>
					<text class="contact-value">{{aboutInfo.storePhone || '暂无电话'}}</text>
				</view>
				<view class="contact-item" @tap="openLocation">
					<text class="contact-icon">📍</text>
					<text class="contact-label">店铺地址</text>
					<text class="contact-value">{{aboutInfo.storeAddress || '暂无地址'}}</text>
				</view>
			</view>
		</view>
		
		<!-- 社交媒体 -->
		<view class="social-section">
			<view class="section-title">关注我们</view>
			<view class="social-list">
				<view class="social-item" v-if="aboutInfo.meituanName">
					<text class="social-icon">🍴</text>
					<text class="social-label">美团</text>
					<text class="social-value">{{aboutInfo.meituanName}}</text>
				</view>
				<view class="social-item" v-if="aboutInfo.douyinName">
					<text class="social-icon">📱</text>
					<text class="social-label">抖音号</text>
					<text class="social-value">{{aboutInfo.douyinName}}</text>
				</view>
				<view class="social-item" v-if="aboutInfo.hongshuName">
					<text class="social-icon">📖</text>
					<text class="social-label">小红书</text>
					<text class="social-value">{{aboutInfo.hongshuName}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import config from '@/config/config.js'

export default {
	data() {
		return {
			aboutInfo: {}
		}
	},
	methods: {
		// 获取系统配置
		async getSystemConfig() {
			try {
				// 先从缓存获取
				const cachedConfig = uni.getStorageSync('slSysConfig')
				
				if (cachedConfig) {
					console.log('从缓存获取系统配置:', cachedConfig)
					this.aboutInfo = cachedConfig
					return
				}
				
				// 如果缓存没有，则调用接口
				const result = await this.$http.post(config.api.slconfig.getConfig)
				console.log('系统配置响应:', result)
				
				if (result.data.code === 200|| result.data.code === 201) {
					const configData = result.data.data
					
					// 存入缓存
					uni.setStorageSync('slSysConfig', configData)
					
					// 更新页面数据
					this.aboutInfo = configData
				} else {
					throw new Error(result.data.msg || '获取系统配置失败')
				}
			} catch (err) {
				console.error('获取系统配置失败:', err)
				uni.showToast({
					title: err.message || '获取系统配置失败',
					icon: 'none'
				})
			}
		},
		
		makePhoneCall() {
			if (!this.aboutInfo.storePhone) return
			uni.makePhoneCall({
				phoneNumber: this.aboutInfo.storePhone
			})
		},
		
		openLocation() {
			if (!this.aboutInfo.storeAddress) return
			uni.openLocation({
				latitude: 32.042362, // 这里可能需要从配置中获取
				longitude: 112.143243,
				name: this.aboutInfo.storeName,
				address: this.aboutInfo.storeAddress
			})
		}
	},
	onLoad() {
		this.getSystemConfig()
	}
}
</script>

<style>
.about-container {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.shop-header {
	position: relative;
	height: 400rpx;
}

.shop-banner {
	width: 100%;
	height: 100%;
}

.shop-info {
	position: absolute;
	bottom: 40rpx;
	left: 40rpx;
	color: #fff;
	text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

.shop-name {
	font-size: 40rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.shop-slogan {
	font-size: 28rpx;
}

.advantage-section,
.contact-section,
.social-section {
	background: #fff;
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 12rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	border-left: 8rpx solid #000;
	padding-left: 20rpx;
}

.advantage-item {
	margin-bottom: 30rpx;
}

.advantage-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.advantage-desc {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

.contact-item,
.social-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.contact-icon,
.social-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
}

.contact-label,
.social-label {
	width: 140rpx;
	font-size: 28rpx;
	color: #666;
}

.contact-value,
.social-value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.contact-item:last-child,
.social-item:last-child {
	border-bottom: none;
}

/* 可点击项的特殊样式 */
.contact-item {
	position: relative;
}

.contact-item::after {
	content: '>';
	position: absolute;
	right: 20rpx;
	color: #999;
}

.contact-item:active {
	background-color: #f5f5f5;
}
</style>
